<template>
<el-container>
    <div>
    <transition name="fade">
        <div class="bg" style="position:absolute;">
            <el-image :src="bg" style="height:100%;z-index=1;" class="bg-image"></el-image>
        </div>
    </transition>

    <transition name="slide-fade">
    <div class="welcome" style="position:absolute;">
    <el-image :src="welcome" style="width:560px;margin-top:230px;margin-left:180px;z-index=2;"></el-image>
    </div>
    </transition>

    <transition name="slide-fade">
        <div class="kgtool" style="position:absolute;">
        <el-image :src="kgtool" style="width:420px;margin-top:340px;margin-left:190px;z-index=2;"></el-image>
        </div>
    </transition>

    <transition name="slide-fade">
        <div style="position:absolute;z-index=1;margin-top:450px;margin-left:190px;margin-right:700px;text-align:left;">
            KGTool motivates users to generate their own datasets and build knowledge graph.
            Our platform can help customers with:
            · generate knowledge graph with various forms of data
            · support QA system & NER application
        </div>
    </transition>
    </div>
</el-container> 
</template>

<script>

import kgtool from '@/assets/kgtool.png'
import welcome from '@/assets/welcome.png'
import bg from '@/assets/bg.png'

export default {
    name:"upload",
    data() {
        return {
            kgtool: kgtool,
            welcome: welcome,
            bg: bg,
        }
    },
    methods: {
    },
}
</script>
<style scoped>
    .el-aside{
        background-color: #2b3a49;
    }
    
    .main{
        background-color: #f3f3f4;
        margin-top:80px;
    }
    .main-container{
        position:absolute;
        height:100%;
        width:100%;
    }
    .card-box{
        margin-top:100px;
    }
    .tab-title{
        color:#fff;
    }



</style>